<template>
    <van-nav-bar :title="videData.vname" left-arrow text-light @click-left="onClickLeft"
        style="background: linear-gradient(90deg, #D09D69 0%, #E0C1A1 100%)" />
    <div class="video-play">

        <video :src="videData.videoplay" controls autoplay width="100%" type="video/mp4"></video>
        <div style="font-size: 15px; font-weight: 800; margin-top: 5px; padding-left: 9px; padding-bottom: 8px;">
            {{ videData.vname }}</div>
        <van-row style="margin-top: 3px; margin-bottom: 15px; font-size: 13px; color: #999999;">
            <van-col span="6" style="text-align: center;">{{ videData.username }} |</van-col>
            <van-col span="5">{{ videData.count }} 万次播放</van-col>
            <van-col span="13">{{ videData.createtime }}</van-col>
        </van-row>
    </div>
    <div>
        <div
            style="padding-left: 10px; font-size: 15px; color: #262323; font-size: 500; border-bottom: 2px solid #f0f0e9;">
            相关阅读</div>
        <hr>
        </hr>
        <div class="videolist" >
            <van-row v-for="item in videolist" :key="item.id">
                <van-col span="16">
                    <van-swipe-cell>
                        <div
                            style="font-size: 16px;color: #060606;font-weight: 500; margin-top: 16px; padding-left: 10px;">
                            {{ item.vname }}</div>
                        <div style="padding-left: 10px; margin-top: 10px; font-size: 10px; color: #060606;">
                            {{ item.username }} | {{ item.count }} 万次播放</div>
                    </van-swipe-cell>
                </van-col>
                <van-col span="8">
                    <video :src="item.videoplay" controls width="100%" height="100%" type="video/mp4"></video>
                </van-col>
            </van-row>
            <hr style="color: aliceblue;font-size: 2px;">
            </hr>
            
        </div>


    </div>




</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { useRoute } from 'vue-router'
const route = useRoute()
import { CarVideosApi } from '../../api';

// 响应式操作 reactive 主要用于对象
const videData = reactive({
    id: '',
    vname: '',
    vimg: '',
    count: '',
    username: '',
    videoplay: '',
    createtime: ''
})

const videolist = ref([])


onMounted(() => {
    console.log(route.query.id);
    videData.id = route.query.id
    CallVidesApi()

})

const CallVidesApi = () => {
    CarVideosApi.select.call({ id: videData.id }).then(res => {
        console.log(res);
        videData.vname = res[0].vname
        videData.videoplay = res[0].videoplay
        videData.username = res[0].username
        videData.count = res[0].count
        videData.createtime = res[0].createtime
    })
    CarVideosApi.select.call().then(res=>{
        videolist.value=res
    })
}



const onClickLeft = () => history.back();
</script>

<style scoped>
.van-swipe-cell {
    height: 82px;
    background-color: white;
    margin-bottom: 10px;
}
.videolist{
    margin-bottom: 60px;
}
</style>